<template>
  <div class="container home-card">
    <h2 class="homeTitle">订单统计</h2>
    <div class="charBox" v-if="props.orderdata && props.orderdata.totalOrderCount !== undefined">

      <div class="top-stats">
        <div class="stats-item">
          <p class="label">订单完成率</p>
          <p class="value big">{{ props.orderdata.totalOrderCount > 0 ? (props.orderdata.orderCompletionRate * 100).toFixed(1) : 0 }}%</p>
        </div>
        <div class="symbol">=</div>
        <div class="stats-item">
          <p class="label">有效订单</p>
          <p class="value">{{ props.orderdata.validOrderCount }}</p>
        </div>
        <div class="symbol">/</div>
        <div class="stats-item">
          <p class="label">订单总数</p>
          <p class="value">{{ props.orderdata.totalOrderCount }}</p>
        </div>
      </div>

      <div ref="chartRef" style="width: 100%; height: 300px"></div>

      <div class="chart-legend">
        <span class="legend-item total"><i></i>订单总数 (个)</span>
        <span class="legend-item valid"><i></i>有效订单 (个)</span>
      </div>
    </div>
    <div v-else class="charBox-placeholder">
      数据加载中...
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue';
import type { PropType } from 'vue';
import * as echarts from 'echarts';

// --- Props ---
const props = defineProps({
  orderdata: {
    type: Object as PropType<any>,
    default: () => ({})
  },
  overviewData: {
    type: Object as PropType<any>,
    default: () => ({})
  }
});

// --- ECharts 初始化与生命周期管理 ---
const chartRef = ref<HTMLElement | null>(null);
let myChart: echarts.ECharts | null = null;

const initChart = () => {
  if (chartRef.value && props.orderdata && props.orderdata.dateList) {
    myChart = myChart || echarts.init(chartRef.value);

    const option: echarts.EChartsOption = {
      tooltip: {
        trigger: 'axis',
        backgroundColor: '#fff',
        borderRadius: 2,
        textStyle: { color: '#333', fontSize: 12, fontWeight: 300 },
      },
      grid: {
        top: '5%', left: '20', right: '50', bottom: '12%', containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLabel: { color: '#666', fontSize: 12 },
        axisLine: { lineStyle: { color: '#E5E4E4', width: 1 } },
        data: props.orderdata.dateList,
      },
      yAxis: [{
        type: 'value', min: 0,
        axisLabel: { color: '#666', fontSize: 12 },
      }],
      series: [
        {
          name: '订单总数', type: 'line', smooth: false, showSymbol: false,
          itemStyle: { color: '#409EFF', lineStyle: { color: '#409EFF' } },
          emphasis: { itemStyle: { color: '#fff', borderWidth: 5, borderColor: '#FFC100' } },
          data: props.orderdata.orderCountList,
        },
        {
          name: '有效订单', type: 'line', smooth: false, showSymbol: false,
          itemStyle: { color: '#FD7F7F', lineStyle: { color: '#FD7F7F' } },
          emphasis: { itemStyle: { color: '#fff', borderWidth: 5, borderColor: '#FD7F7F' } },
          data: props.orderdata.validOrderCountList,
        }
      ],
    };
    myChart.setOption(option);
  }
};

const resizeChart = () => { myChart?.resize(); };

onMounted(() => {
  initChart();
  window.addEventListener('resize', resizeChart);
});

onUnmounted(() => {
  window.removeEventListener('resize', resizeChart);
  myChart?.dispose();
});

watch(() => props.orderdata, (newData) => {
  if (newData) { initChart(); }
}, { deep: true });
</script>

<style lang="scss" scoped>
// 引入你的全局变量文件，以便使用颜色等
// 假设你的变量文件路径是 @/styles/_variables.scss
@import "@/styles/_variables.scss";

// 卡片式布局
.home-card {
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

// 标题样式
.homeTitle {
  font-size: 16px;
  font-weight: 600;
  color: #303133; // 使用 $text-color-primary 变量，如果已定义
  margin: 0 0 20px 0;
}

// 顶部统计数据布局
.top-stats {
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  margin-bottom: 20px;

  .stats-item {
    .label {
      font-size: 14px;
      color: #909399; // 使用 $text-color-secondary 变量
      margin: 0 0 5px 0;
    }
    .value {
      font-size: 20px;
      font-weight: bold;
      color: #303133; // 使用 $text-color-primary 变量
      margin: 0;
      &.big {
        font-size: 28px;
        color: #000;
      }
    }
  }

  .symbol {
    font-size: 24px;
    color: #909399; // 使用 $text-color-secondary 变量
    margin: 0 10px;
  }
}

// 图表下方的图例
.chart-legend {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-top: 10px;
  font-size: 12px;
  color: #606266; // 使用 $text-color-regular 变量

  .legend-item {
    display: flex;
    align-items: center;

    i {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-right: 8px;
    }

    // 图例颜色
    &.total i {
      background-color: #009dff;
    }
    &.valid i {
      background-color: #FD7F7F;
    }
  }
}

// 加载占位符样式
.charBox-placeholder {
  text-align: center;
  padding: 40px;
  color: #909399;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
